<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">

  <title>Cocos Creator | LaserBall</title>

  <!--http://www.html5rocks.com/en/mobile/mobifying/-->
  <meta name="viewport"
        content="width=device-width,user-scalable=no,initial-scale=1, minimum-scale=1,maximum-scale=1"/>

  <!--https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html-->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="format-detection" content="telephone=no">

  <!-- force webkit on 360 -->
  <meta name="renderer" content="webkit"/>
  <meta name="force-rendering" content="webkit"/>
  <!-- force edge on IE -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta name="msapplication-tap-highlight" content="no">

  <!-- force full screen on some browser -->
  <meta name="full-screen" content="yes"/>
  <meta name="x5-fullscreen" content="true"/>
  <meta name="360-fullscreen" content="true"/>
  
  <!-- force screen orientation on some browser -->
  <meta name="screen-orientation" content="portrait"/>
  <meta name="x5-orientation" content="portrait">

  <!--fix fireball/issues/3568 -->
  <!--<meta name="browsermode" content="application">-->
  <meta name="x5-page-mode" content="app">

  <!--<link rel="apple-touch-icon" href=".png" />-->
  <!--<link rel="apple-touch-icon-precomposed" href=".png" />-->

  <link rel="stylesheet" type="text/css" href="style-mobile.css"/>
  <link rel="icon" href="favicon.ico"/>
</head>
<body>
  <canvas id="GameCanvas" oncontextmenu="event.preventDefault()" tabindex="0"></canvas>
  <div id="splash">
    <div class="progress-bar stripes">
      <span style="width: 0%"></span>
    </div>
  </div>
  <script type="text/javascript">
    (function () {

        var curWidth = 0;
        var curHeight = 0;

        function isFullScreen() {
            return !!(
                document.fullscreen ||
                document.mozFullScreen ||
                document.webkitIsFullScreen ||
                document.webkitFullScreen ||
                document.msFullScreen
            );
        }

        function requestFullScreen() {
            var element = document.documentElement;
            if (element.requestFullscreen) {
                element.requestFullscreen();
            } else if (element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
            } else if (element.webkitRequestFullScreen) {
                element.webkitRequestFullScreen();
            }
        }

        function exitFullscreen() {
            var element = document.documentElement;
            if (element.exitFullscreen) {
                element.exitFullscreen();
            } else if (element.mozCancelFullScreen) {
                element.mozCancelFullScreen();
            } else if (de.webkitCancelFullScreen) {
                element.webkitCancelFullScreen();
            }
        }

        var userAgent = navigator.userAgent;
        var agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
        var isPC = true;
        for (var v = 0; v < agents.length; v++) {
            if (userAgent.indexOf(agents[v]) > 0) {
                isPC = false;
                break;
            }
        }

        document.body.style.margin = "0 auto";
        document.body.style.overflow = "auto";
        var gameDiv = document.createElement('GameDiv');
        gameDiv.id = 'GameDiv';
        gameDiv.style.margin = '0 auto';
        gameDiv.style.position = 'relative';
        document.body.appendChild(gameDiv);

        var gameCanvas = document.getElementById('GameCanvas');
        document.body.removeChild(gameCanvas);
        gameDiv.appendChild(gameCanvas);

        var splash = document.getElementById('splash');
        if (splash) {
            document.body.removeChild(splash);
            gameDiv.appendChild(splash);
        }

        function setGameDiv() {
            var position = 'absolute';
            var clientWidth = document.documentElement.clientWidth;
            var clientHeight = document.documentElement.clientHeight;
            var gameWidth;
            var gameHeight;
            if (isPC) {
                if (curWidth == clientWidth && curHeight == clientHeight) {
                    return;
                }
                var widthRatio = clientWidth / 720;
                var heightRatio = clientHeight / 1280;
                gameWidth = (widthRatio < heightRatio) ? '100%' : 720 * heightRatio;
                gameHeight = (widthRatio < heightRatio) ? 1280 * widthRatio : '100%';
                if(gameWidth != '100%') {
                    if(gameWidth > clientWidth) {
                        position = 'relative';
                    }
                    gameWidth += 'px';
                }
                if(gameHeight != '100%') {
                    if(gameHeight > clientHeight) {
                        position = 'relative';
                    }
                    gameHeight += 'px';
                }
            } else {
                gameWidth = '100%';
                gameHeight = '100%';
            }
            document.body.style.position = position;
            gameDiv.style.width = gameWidth;
            gameDiv.style.height = gameHeight;
        }

        setGameDiv();

        document.body.addEventListener('click', function () {
            if (!isPC && !isFullScreen()) {
                requestFullScreen();
            }
        }, false);

        gameCanvas.addEventListener('touchend', function () {
            if (!isPC && !isFullScreen()) {
                requestFullScreen();
            }
        }, false);

        window.onresize = function () {
            setGameDiv();
        }
    })();
</script>
<script src="src/settings.js" charset="utf-8"></script>

<script src="main.js" charset="utf-8"></script>

<script type="text/javascript">
(function () {
    // open web debugger console
    if (typeof VConsole !== 'undefined') {
        window.vConsole = new VConsole();
    }

    var debug = window._CCSettings.debug;
    var splash = document.getElementById('splash');
    splash.style.display = 'block';

    function loadScript (moduleName, cb) {
      function scriptLoaded () {
          document.body.removeChild(domScript);
          domScript.removeEventListener('load', scriptLoaded, false);
          cb && cb();
      };
      var domScript = document.createElement('script');
      domScript.async = true;
      domScript.src = moduleName;
      domScript.addEventListener('load', scriptLoaded, false);
      document.body.appendChild(domScript);
    }

    loadScript(debug ? 'cocos2d-js.js' : 'cocos2d-js-min.js', function () {
      if (CC_PHYSICS_BUILTIN || CC_PHYSICS_CANNON) {
        loadScript(debug ? 'physics.js' : 'physics-min.js', window.boot);
      }
      else {
        window.boot();
      }
    });
})();
</script>
</body>
</html>
